<template>
  <div>
    <el-dialog title="隐形成品片批量新增" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-divider content-position="left">必填项</el-divider>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" inline size="mini">
        <el-row>
          <el-col :span="8">
            <el-form-item label="制造商" prop="supplyName">
              <el-input v-model="dataForm.supplyName" readonly="readonly">
                <el-button slot="append" @click="getSupplyList">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品品种" prop="brandName">
              <el-input v-model="dataForm.brandName" readonly="readonly">
                <el-button slot="append" @click="getBrandList">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="dataForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品编号" prop="color">
              <el-input v-model="dataForm.color"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位" prop="unitType">
              <el-select v-model="dataForm.unitType">
                <el-option v-for="item in unitTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="球镜" prop="mirrorBall" label-width="100px">
              <el-row>
                <el-form-item label="下限" label-width="50px" prop="batchMirrorBallMin">
                  <el-select v-model="dataForm.batchMirrorBallMin">
                    <el-option v-for="item in mirrorBallOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上限" label-width="50px" prop="batchMirrorBallMax">
                  <el-select v-model="dataForm.batchMirrorBallMax">
                    <el-option v-for="item in mirrorBallOptions" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="跨度" label-width="50px" prop="mirrorBallSpan">
                  <el-select v-model="dataForm.mirrorBallSpan">
                    <el-option v-for="item in bizData.spanData" :value='item.value' :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="柱镜" prop="columnMirror">
              <el-select v-model="dataForm.columnMirror">
                <el-option v-for="item in columnMirrorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="轴向" prop="axialDirection">
              <el-input v-model="dataForm.axialDirection"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="曲率" prop="curvature">
              <el-input v-model="dataForm.curvature"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="直径" prop="diameter">
              <el-input v-model="dataForm.diameter"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收费项目" prop="payType">
              <el-select v-model="dataForm.payType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.payType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8"></el-col>
        </el-row>

        <el-divider content-position="left">非必填项</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="使用类型" prop="useType">
              <el-select v-model="dataForm.useType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.useType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抛弃型分类" prop="disusedClassification">
              <el-select v-model="dataForm.disusedClassification" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.disusedClassification" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品可使用天数" prop="useNumberDays">
              <el-input v-model="dataForm.useNumberDays"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="颜色" prop="chineseColor">
              <el-select v-model="dataForm.chineseColor" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.chineseColorData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="隐形类别" prop="stealthType">
              <el-select v-model="dataForm.stealthType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.stealthTypeOne" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="材质" prop="nursingLiquidType">
              <el-select v-model="dataForm.nursingLiquidType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.nursingLiquidTypeOne" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="效期提醒上限" prop="disusedClassification">
              <el-input v-model="dataForm.expiryReminderBefore">
                <template slot="prepend">有效期前</template>
                <template slot="append">天提醒进入滞销状态</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="效期提醒下限" prop="useNumberDays">
              <el-input v-model="dataForm.expiryReminderEnd">
                <template slot="prepend">有效期前</template>
                <template slot="append">天提醒进入滞销状态</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">价格项</el-divider>
        <el-row v-for="(item,index) in this.priceGroup" :key="index">
          <el-col :span="3" style="text-align: center;">
            <el-form-item label-width="0"> {{item.priceGroupName}} </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="税率" :prop="'list.'+index+'.taxRate'" :rules="productGroupRules.productGroupRate">
              <el-input v-model="item.taxRate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="含税单价" :prop="'list.'+index+'.taxPrice'" :rules="productGroupRules.productGroupNum">
              <el-input v-model="item.taxPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="零售价格" :prop="'list.'+index+'.price'" :rules="productGroupRules.productGroupPrice">
              <el-input v-model="item.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
      </span>
      <select-supply v-if="selectSupplyVisible" ref="selectSupply" @refreshData="updateFormSupply"></select-supply>
      <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
    </el-dialog>
  </div>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import { goodsGetObj, goodsAddObj, goodsPutObj, batchAddCtgSale4 } from '@/api/eims/goods'
  import { filterParams } from '@/util/tools'
  import { goodsPriceList } from '@/api/eims/goods-price'
  import SelectSupply from '@/components/business/SearchSupply'
  import SelectBrand from '@/components/business/SearchBrand'

  export default {
    data() {
      return {
        ischeck: false,
        visible: false,
        type: '',
        bizData: {},
        unitTypeData: [],
        priceGroup: [],
        goodsPriceGroup: [],
        dataForm: {
          id: 0,
          ctgId: '4', //  类别
          ctgSaleId: '5', //  商品销售类别
          name: '', //  商品名称

          supplyId: '', //  供应商ID
          supplyName: '', //  供应商名称
          supplyCode: '',
          brandId: '', //  商品品种ID
          brandName: '', //  商品名称
          brandCode: '',
          color: '',
          batchMirrorBallMin: '',
          batchMirrorBallMax: '',
          mirrorBallSpan: '',
          columnMirror: '', //  柱镜
          axialDirection: '',
          curvature: '',
          diameter: '',
          color: '', //  商品编号
          status: '', //  商品状态
          unitType: '', //  计量单位
          payType: '', //收费项目
          useType: '',
          disusedClassification: '',
          useNumberDays: '',
          chineseColor: '',
          stealthType: '',
          nursingLiquidType: '',
          expiryReminderBefore: '',
          expiryReminderEnd: '',
          list: [] //价格组
        },
        dataRule: {
          name: [{required: true, message: '名称不能为空', trigger: 'blur' }],
          supplyName: [{ required: true, message: '制造商不能为空', trigger: 'blur' }],
          brandName: [{ required: true, message: '商品品种不能为空', trigger: 'blur' }],
          unitType: [{ required: true, message: '计量单位不能为空', trigger: 'blur' }],
          batchMirrorBallMin: [{ required: true, message: '球镜下限不能为空', trigger: 'blur' }],
          batchMirrorBallMax: [{ required: true, message: '球镜上限不能为空', trigger: 'blur' }],
          mirrorBallSpan: [{ required: true, message: '球镜跨度不能为空', trigger: 'blur' }],
          columnMirror: [{ required: true, message: '柱镜不能为空', trigger: 'blur' }],
          color: [{ required: true, message: '商品编号不能为空', trigger: 'blur' }],
          axialDirection: [{ required: true, message: '轴向不能为空', trigger: 'blur' }],
          curvature: [{ required: true, message: '曲率不能为空', trigger: 'blur' }],
          diameter: [{ required: true, message: '直径不能为空', trigger: 'blur' }],
          payType: [{ required: true, message: '计量单位不能为空', trigger: 'blur' }],
        },
        productGroupRules: {
          productGroupRate: [{
              required: true,
              message: '请填写该价格组税率',
              trigger: 'blur'
            },
            {
              trigger: 'blur',
              message: '税率必须为整数(1~2位数)',
              pattern: /^[1-9]\d{0,1}$/
            }
          ],
          productGroupNum: [{
              required: true,
              message: '请填写含税价格',
              trigger: 'blur'
            },
            {
              trigger: 'change',
              message: '只能保留两位位小数',
              pattern: /^([1-9]\d*)(\.\d{0,2})?$/
            }
          ],
          productGroupPrice: [{
              required: true,
              message: '请填写零售价格',
              trigger: 'blur'
            },
            {
              trigger: 'change',
              message: '只能保留两位位小数',
              pattern: /^([1-9]\d*)(\.\d{0,2})?$/
            }
          ]

        },
        selectSupplyVisible: false,
        selectBrandVisible: false,
        mirrorBallOptions: [],
        columnMirrorOptions: []
      }
    },
    components: {
      SelectSupply,
      SelectBrand
    },
    methods: {
      init(data) {
        this.bizData = this.$store.getters.bizData
        remote('unit_type').then(response => {
          if(response.data.code == '0'){
            this.unitTypeData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
        this.visible = true
        this.priceGroup = []
        this.dataForm.list = []
        this.getGoodsPriceList()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          // 获取球镜和柱镜范围
          remote('mirror_ball_enum').then(response => {
            if(response.data.code == '0'){
              this.mirrorBallOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
          remote('column_mirror_enum').then(response => {
            if(response.data.code == '0'){
              this.columnMirrorOptions = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
          // dataForm表单中没有supplyId和brandId属性，无法自动重置，进行手动重置
          this.dataForm.supplyId = ''
          this.dataForm.supplyCode = ''
          this.dataForm.brandId = ''
          this.dataForm.brandCode = ''
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.dataForm.list = this.priceGroup
            batchAddCtgSale4(filterParams(this.dataForm)).then(response => {
              if(response.data.code == '0'){
                this.$message.success('添加成功')
              }else{
                this.$message.error(response.data.msg)
              }
              this.ischeck = false
            }).catch(() => {
              this.ischeck = false
            })
          }else{
            this.ischeck = false
          }
        })
      },
      // 获取商品制造商信息
      getSupplyList() {
        let data = {
          ctgId: 4
        }
        this.selectSupplyVisible = true
        this.$nextTick(() => {
          this.$refs.selectSupply.init(data)
        })
      },
      // 更新表单制造商信息
      updateFormSupply(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.supplyCode = data.code
      },
      // 获取商品品种信息
      getBrandList() {
        if (!this.dataForm.supplyId) {
          this.$message.warning('请选择制造商')
          return false
        }
        let data = {
          ctgId: 4,
          supplyId: this.dataForm.supplyId
        }
        this.selectBrandVisible = true
        this.$nextTick(() => {
          this.$refs.selectBrand.init(data)
        })
      },
      //  更新表单品种信息
      updateFormBrand(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
        this.dataForm.name = data.name
        this.dataForm.brandCode = data.code
      },
      //  查询商品价格组列表
      getGoodsPriceList() {
        goodsPriceList().then(response => {
          if(response.data.code == '0'){
            let data = response.data.data
            data.forEach(item => {
              let obj = {}
              obj.priceGroupId = item.id
              obj.priceGroupName = item.groupName
              this.priceGroup.push(obj)
              this.dataForm.list.push(obj)
            })
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 10px;
  }
</style>
